<template>
  <el-autocomplete v-model="infoName"
                   valueKey="cargoTypeName"
                   @blur="checkCurrentId"
                   :trigger-on-focus="true"
                   :fetch-suggestions="querySearchAsync"
                   @mouseenter.native="isMouseEnter=true"
                   @mouseleave.native="isMouseEnter=false"
                   :disabled="disabled"
                   :placeholder="placeholder"
                   @select="handleSelectDic">
    <i class="el-input__icon"
       :class="infoName&&isMouseEnter&&!disabled?'el-icon-error':'el-icon-edit'"
       @click="handleClear"
       slot="suffix"></i>
    <template slot-scope="props">
      <div class="cargoTypeName">{{ props.item.cargoTypeName }}</div>
    </template>
  </el-autocomplete>
</template>

<script>
import CommonSearchInput from './common'
import { getCargoList } from '@/api/things/cargo'
export default {
  mixins: [CommonSearchInput],
  props: {},
  methods: {
    // 异步搜索信息
    querySearchAsync(queryString, cb) {
      let params = {
        search_LIKE_name: queryString,
        iDisplayLength: this.iDisplayLength
      }
      getCargoList(params).then(reponse => {
        cb(reponse.data.aaData)
      })
    },
    handleClear() {
      if (this.infoName && !this.disabled) {
        this.infoName = ''
        this.$emit('select', '')
        this.$emit('selectName', '')
      }
    },
    handleSelectDic(item) {
      this.$emit('select', item.cargoTypeName)
      this.$emit('selectName', item.cargoTypeName)
      this.infoName = item.cargoTypeName
    }
  }
}
</script>
